<template>
    <div>
        <div style="position: absolute; top: 10px; left: 0px; width: 60%;">
		    <img src="../assets/background.jpg" style="width: 100%; height: 90%; position: relative; top: 60px;">
	    </div>
        <div id="top">
            <div class="topfont">
                教务管理系统
                <span style="font-size:12px">2023-小组项目</span>
            </div>
        </div>
        <div style="position: absolute; top: 180px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5;border-radius: 8px; box-shadow: 5px 5px 5px rgba(205, 203, 203, 0.9);">
            <div style="position: absolute; top: 0px; right: 60px; padding-top: 20px;">
                <div>
                    <h1 style="margin-left: 10px; ">登录</h1>
                </div>
                <hr style="margin-bottom: 20px; color: #ffffff;"/>
                <form>
                    <div>
                        <div style="width: 350px;">
                            <input type="text" placeholder="用户名" class="input" v-model="params.username">
                        </div>
                        <div style="width: 350px; position: relative;top: 20px;">
                            <input type="password" placeholder="密码" class="input" v-model="params.password">
                        </div>
                        <div class="checkbox"  style="position: relative;top: 40px; left: 10px; color: rgb(255, 78, 78);font-weight: 800;">
                            <span id="msg">{{ msg }}</span>
                        </div>
                        <button type="submit" class="button" @click="toLogin" style="margin-right: 40px;background-color: rgb(0, 132, 255);">登录</button>
                        <input type="reset" class="button" style="background-color: rgb(238, 133, 133);" value="重置">
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"Login",
        data() {
            return {
                params:{
                    username:"",
                    password:""
                },
                msg:"",
            }
        },
        methods:{
            toLogin() {
                this.$axios({
                    method:"get",
                    url:"http://localhost:8081/login/find",
                    params:this.params
                }).then(res=>{
                    console.log(res.data);
                    this.msg=res.data.msg;
                    if(res.data.code == 20100) {
                        localStorage.setItem("username",this.params.username);
                        localStorage.setItem("password",this.params.password);
                        this.$router.push("/home/student/query");
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }
        }
    }
</script>

<style>
    #top{
        height: 60px;
        background-color: #3c3c3c;
        width: 100%;
    }
    .topfont {
        position: absolute;
        top: 15px;
        left: 40px;
        font-size: 30px;
        font-weight: 400;
        line-height: 45px;
        color: white;
        font-family: 'Times New Roman', Times, serif;
    }
    .input {
        height: 40px;
        width: 330px;
        border-radius: 5px;
        border: rgb(223, 223, 223) 1px solid;
        padding-left: 20px;
        font-size: 17px;
    }
    .button {
        width: 100px; 
        height: 50px;
        border-radius: 5px;
        border: none;
        font-size: 20px;
        position: relative;
        top: 65px;
        color: white;
    }
</style>